<template>
  <div id="type">
    <div class="pie-title">设备型号</div>
    <div id="chart-type" ref="type"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import { getDeviceType } from '@/api/home/index.js';

export default {
  name: 'type',
  components: {},
  data() {
    return {
      data: [],
      total: 0
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getDeviceType();
  },
  beforeCreate() { },
  beforeMount() { },
  methods: {
    init(data) {
      console.log(data, 'data')
      let dom = echarts.init(this.$refs.type);
      var option = {
        title: {
          textAlign: 'center',
          text: '{a|设备总数}\n{c|' + this.total + '}',
          x: '23%',
          y: '25%',
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                color: 'rgba(225,225,225,.4)',
                padding: 5,
              },

              c: {
                fontSize: 30,
                fontWeight: 600,
                color: '#fff',
                padding: 5,
              },
            },
          },
        },
        tooltip: {
          show: false,
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          top: '20%',
          right: '10%',
          selectedMode: false,
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
          formatter: (name) => {
            let value = data.filter((item) => item.name == name)[0];
            return `{title|${name}}{value|${value.value}}`;
          },
          textStyle: {
            fontSize: 14,
            rich: {
              title: {
                width: 60,
                fontSize: 14,
                color: 'rgb(255, 255, 255,.6)',
              },
              value: {
                width: 30,
                align: 'center',
                fontSize: 14,
                color: '#fff',
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            hoverAnimation: false,
            radius: ["45%", "75%"],
            center: ["25%", "40%"],
            color: ["#95A4A3", "#698280"],
            itemStyle: {
              borderRadius: 60,
            },
            label: {
              normal: {
                position: "inner",
                formatter: function (param) {
                  if (!param.percent) return "";
                  var f = Math.round(param.percent * 10) / 10;
                  var s = f.toString();
                  var rs = s.indexOf(".");
                  if (rs < 0) {
                    rs = s.length;
                    s += ".";
                  }
                  while (s.length <= rs + 1) {
                    s += "0";
                  }
                  return s + "%";
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data,
          },
          {
            name: '背景',
            type: 'pie',
            radius: ["45%", "75%"],
            center: ["25%", "40%"],
            label: {
              show: false,
            },
            data: [
              {
                value: 20,
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      colorStops: [
                        { offset: 0, color: '#698280' },
                      ],
                    }
                  },
                },
              }
            ],
            z: 0
          },
        ],
      };
      dom.setOption(option);
      addEventListener('resize', function () {
        dom.resize();
      });
    },
    async getDeviceType() {
      const res = await getDeviceType();
      if (res.code == 200) {
        this.data = [];
        res.data.forEach((item) => {
          this.total += item.modelCount
          this.data.push({
            name: item.model,
            value: item.modelCount,
          });
        });
        this.$nextTick(() => {
          this.init(this.data);
        })

      }
    },
  },
};
</script>
<style lang='scss' scoped>
// @import './css/index.scss';

#type {
  width: 100%;
  height: 100%;
  // height: 250px;
}

.pie-title {
  height: 60px;
  line-height: 60px;
  margin-left: 30px;
  background: linear-gradient(180deg, #EEFAFF 0%, #5C899F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
  font-weight: 600;
}

#chart-type {
  height: calc(100% - 60px);
}
</style>